<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="resource/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div>
        <ul class="parent">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <script>
        // 匹配祖辈的所有后辈元素
        console.log($("ul li"));
        console.log($("div ul"));
        console.log($("div ul li"));
        // 匹配父级元素下的所有子元素
        console.log($("ul > li"));
        console.log($(".parent > li"));
    </script>
    <div>
        <form action="">
            <span>
                <input type="text">
            </span>
            <input type="text">
            <input type="text">
            <input type="text">
        </form>
        <span>
            <input type="text">
        </span>
        <input type="text">
        <input type="text">
    </div>
    <input type="text">
    <script>
        //匹配span后面紧接的兄弟元素input
        console.log($("span + input"));
        //匹配span后面所有的兄弟元素input
        console.log($("span ~ input"));
    </script>
</body>
</html>